<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<base href="http://localhost:8080/bks_xk/" />
<title>课程列表</title>
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href='css/playball.css' rel='stylesheet' type='text/css'>
<link href="css/list_style.css" rel="stylesheet" type="text/css"
	media="all" />
<link href="css/course_style.css" rel="stylesheet" type="text/css"
	media="all" />
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.tmpl.min.js"></script>
<script type="text/javascript" src="js/jquerySession.js"></script>
<script type="text/javascript" src="js/course_script.js" charset="utf-8"></script>
</head>
<body>
	<div class="content">
		<div class="header">
			<div class="header_icon">
				<img src="images/schoolLogo.png" alt="山东大学" />
			</div>
		</div>
		<div class="middle">
			<div class="middle_top">
				<div class="image">
					<img src="images/pic1.jpg" alt="课程图片" />
				</div>
				<div class="desc">
					<div class="desc_top">
						<h2>高等数学</h2>
						<button id="select_this_course">选择该课程</button>
					</div>
					<div class="clear"></div>
					<div class="desc_bottom">
						<div class="desc_right">
							<div class="course_val_left">
								<ul>
									<li><span class="a">学分：</span><span class="b">4</span></li>
									<li><span class="a">学时：</span><span class="b">2</span></li>
									<li><span class="a">上课节次：</span><span class="b">23</span></li>
									<li><span class="a">课程容量：</span><span class="b">150</span></li>
									<li><span class="a">已报名人数：</span><span class="b">149</span></li>
								</ul>
							</div>
							<!-- course_val_left 结束  -->
							<div class="course_val_right">
								<ul>
									<li><span class="a">课程性质（属性）：</span><span class="b">选修</span></li>
									<li><span class="a">上课周次：</span><span class="b">9-17周</span></li>
									<li><span class="a">开设学院：</span><span class="b">计算机学院</span></li>
									<li><span class="a">上课地点：</span><span class="b">软件园校区4区109</span></li>
									<li><span class="a">上课班级：</span><span class="b">计软14.8,计软14.3,计软14.4,计软14.1,计软14.2,计软14.5,计软14.6,计软14.7</span>
									</li>
								</ul>
							</div>
							<!-- course_val_right 结束  -->
						</div>
						<!-- desc_right 结束  -->
					</div>
					<div class="clear"></div>
					<!-- desc_bottom 结束  -->
				</div>
				<!-- desc 结束  -->
				<div class="clear"></div>
			</div>
			<!-- middle_top 结束  -->
			<div class="middle_bottom">
				<div class="bottom_left">
					<div class="course_brief">
						<span>简介：</span> <span>Laravel框架是世界上最流行的PHP开发框架，没有之一。近年来Laravel以强大、安全、优雅等特性迅速占据了PHP开发框架第一份额的宝座。现在Laravel框架已成为大型互联网公司及PHP攻城狮们的首选框架。</span>
					</div>
					<div class="course_menu">
						<ul>
							<li><a id="menu_mod_learn_btn">课程大纲</a></li>
							<li><a id="menu_mod_comment_btn">评论</a></li>
							<li><a id="menu_mod_qa_btn">问答</a></li>
							<li><a id="menu_mod_files_btn">资料</a></li>
						</ul>
					</div>
					<!-- course_menu 结束  -->
					<div class="course_mod">
						<div class="mod_learn">
							<ul>
								<li>chapter 1: 微积分</li>
								<li>chapter 2: 微积分微积分微积分</li>
								<li>chapter 3: 微积分微积分微积分微积分微积分</li>
								<li>chapter 4: 微积分微积分微积分</li>
								<li>chapter 5: 微积分微积分</li>
							</ul>
						</div>
						<!-- mod_learn 结束  -->
						<div class="mod_comment">
							<ul>
								<li>
									<div class="comment_desc">
										<div class="comment_left">
											<img src="images/headIcon.jpg" alt="headIcon" />
										</div>
										<div class="comment_right">
											<div class="right_title">沧233</div>
											<p>这妹子声音真好听，求交配.</p>

											<div class="right_bottom">
												<span>时间：2014-9-10</span> <a href=""><span
													class="great_icon"></span></a>
											</div>
										</div>
										<!-- comment_right 结束  -->
									</div> <!-- comment_desc 结束  -->
								</li>
								<li>
									<div class="comment_desc">
										<div class="comment_left">
											<img src="images/headIcon.jpg" alt="headIcon" />
										</div>
										<div class="comment_right">
											<div class="right_title">沧233</div>
											<p>Lorem ipsum dolor sit amet, consectetur adipisicing
												elit. At, commodi debitis, earum eveniet ex facere fugiat
												impedit in ipsum, libero maxime molestiae necessitatibus
												nulla omnis praesentium quae rerum sit tempora?</p>

											<div class="right_bottom">
												<span>时间：2014-9-10</span> <a href=""><span
													class="great_icon">+1</span></a>
											</div>
										</div>
										<!-- comment_right 结束  -->
									</div> <!-- comment_desc 结束  -->
								</li>
							</ul>
							<div class="user_input_comment">
								<span>发表评论</span>

								<textArea class="input_textArea" rows="3" maxlength="100"
									placeholder="编写评论(<=100字)"></textArea>
								<button class="input_button">发送</button>
							</div>
						</div>
						<!-- mod_comment 结束  -->
						<div class="mod_qa">
							<ul></ul>
							<span>功能尚未开放，敬请期待！</span>
						</div>
						<!-- mod_qa 结束  -->
						<div class="mod_files">
							<ul>
								<li>
									<div class="file_desc">
										<div class="desc_title">上传者：沧233</div>
										<a href="...">2014级期末考试题.doc</a>

										<div class="desc_bottom">
											<span>时间：2014-9-10</span> <span>大小：1.6M</span> <span>下载次数：121</span>
										</div>
									</div> <!-- file_desc 结束  -->
								</li>
								<li>
									<div class="file_desc">
										<div class="desc_title">上传者：沧233</div>
										<a href="...">2014级期末考试题.doc</a>

										<div class="desc_bottom">
											<span>时间：2014-9-10</span> <span>大小：1.6M</span> <span>下载次数：121</span>
										</div>
									</div> <!-- file_desc 结束  -->
								</li>
								<li>
									<div class="file_desc">
										<div class="desc_title">上传者：沧233</div>
										<a href="...">2014级期末考试题.doc</a>

										<div class="desc_bottom">
											<span>时间：2014-9-10</span> <span>大小：1.6M</span> <span>下载次数：121</span>
										</div>
									</div> <!-- file_desc 结束  -->
								</li>
								<li>
									<div class="file_desc">
										<div class="desc_title">上传者：沧233</div>
										<a href="...">2014级期末考试题.doc</a>

										<div class="desc_bottom">
											<span>时间：2014-9-10</span> <span>大小：1.6M</span> <span>下载次数：121</span>
										</div>
									</div> <!-- file_desc 结束  -->
								</li>
								<li>
									<div class="file_desc">
										<div class="desc_title">上传者：沧233</div>
										<a href="...">2014级期末考试题.doc</a>

										<div class="desc_bottom">
											<span>时间：2014-9-10</span> <span>大小：1.6M</span> <span>下载次数：121</span>
										</div>
									</div> <!-- file_desc 结束  -->
								</li>
								<li>
									<div class="file_desc">
										<div class="desc_title">上传者：沧233</div>
										<a href="...">2014级期末考试题.doc</a>

										<div class="desc_bottom">
											<span>时间：2014-9-10</span> <span>大小：1.6M</span> <span>下载次数：121</span>
										</div>
									</div> <!-- file_desc 结束  -->
								</li>
							</ul>
							<iframe id="upload_frame" name="upload_frame"
								class="upload_frame"
								src="http://localhost:8080/bks_xk/file/upload"
								frameborder="0" width="100%" height="110px" scrolling="no">
							</iframe>

							<!-- 
							<div class="upload_frame_div">
								<h3>上传附件</h3>
								<form method="post"
									action="http://localhost:8080/bks_xk/file/doUpload"
									enctype="multipart/form-data">
									<div class="div">
										<span>选择文件:</span><input type="file" name="file"
											id="input_file" />
									</div>
									<div class="div">
										<button id="file_upload_button" type="button"
											class="input_button">上传</button>
									</div>
								</form>
								<div class="clear"></div>
								<div class="show_upload_message">
									<span></span>
								</div>
							</div>-->

						</div>
						<!-- mod_files 结束  -->
					</div>
					<!-- course_mod 结束  -->
				</div>
				<!-- bottom_left 结束  -->
				<div class="bottom_right">
					<h4>老师介绍</h4>

					<div class="teacher_info">
						<div class="teacher_icon">
							<img src="images/headIcon.jpg" alt="icon" />
						</div>
						<div class="teacher_name">
							<span class="name_1">宫献军</span> <span class="name_2">数学学院副教授</span>
						</div>
					</div>
					<div class="teacher_brief">
						<p>
							Laravel框架是世界上最流行的PHP开发框架，没有之一。近年来Laravel以强大、安全、优雅等特性迅速占据了PHP开发框架第一份额的宝座。现在Laravel框架已成为大型互联网公司及PHP攻城狮们的首选框架。</p>
					</div>
					<!-- teacher_brief 结束  -->
				</div>
				<!-- bottom_right 结束  -->
				<div class="clear"></div>
			</div>
		</div>
		<!-- middle 结束 -->
		<div class="clear"></div>
		<div class="footer">
			<div class="copyright">
				<p>Copyright &copy; 2016.Company name All rights reserved.</p>

				<p>
					<a target="_blank" href="http://www.zhagzheguo.cn">Powered by
						Zhagzheguo</a>
				</p>
			</div>
		</div>
		<!-- footer 结束 -->
	</div>
	<script type="text/template" id="course_all_info_desc_right">
    <div class="course_val_left">
        <ul>
            <li><span class="a">学分：</span><span class="b">${credit}</span></li>
            <li><span class="a">学时：</span><span class="b">${hours}</span></li>
            <li><span class="a">上课节次：</span><span class="b">${classes}</span></li>
            <li><span class="a">课程容量：</span><span class="b">${capacity}</span></li>
            <li><span class="a">已报名人数：</span><span class="b">${enrolledNumber}</span></li>
        </ul>
    </div>
    <!-- course_val_left 结束  -->
    <div class="course_val_right">
        <ul>
            <li><span class="a">课程性质（属性）：</span><span class="b">${nature}</span></li>
            <li><span class="a">上课周次：</span><span class="b">${weeks}</span></li>
            <li><span class="a">开设学院：</span><span class="b">${openedDep}</span></li>
            <li><span class="a">上课地点：</span><span class="b">${place}</span></li>
            <li><span class="a">上课班级：</span><span class="b">${clazz}</span>
            </li>
        </ul>
    </div>
    <!-- course_val_right 结束  -->
</script>
	<script type="text/template" id="teacher_info">
    <h4>老师介绍</h4>

    <div class="teacher_info">
        <div class="teacher_icon">
            <img src="${headIcon}" alt="icon"/>
        </div>
        <div class="teacher_name">
            <span class="name_1">${name}</span>
            <span class="name_2"></span>
        </div>
    </div>
    <div class="teacher_brief">
        <p>${description}</p>
    </div>
    <!-- teacher_brief 结束  -->
</script>
	<script type="text/template" id="course_mod_learn_temp">
    <div class="mod_learn">
        <ul>
            <li>chapter 1: 微积分</li>
            <li>chapter 2: 微积分微积分微积分</li>
            <li>chapter 3: 微积分微积分微积分微积分微积分</li>
            <li>chapter 4: 微积分微积分微积分</li>
            <li>chapter 5: 微积分微积分</li>
        </ul>
    </div>
    <!-- mod_learn 结束  -->
</script>
	<script type="text/template" id="course_mod_comment_temp">
    <li>
        <div class="comment_desc">
            <div class="comment_left">
                <img src="${stu.headIcon}" alt="headIcon"/>
            </div>
            <div class="comment_right">
                <div class="right_title">${stu.name}</div>
                <p>${content}</p>

                <div class="right_bottom">
                    <span>${date}</span>
                    <a href=""><span class="great_icon">${great}</span></a>
                </div>
            </div>
            <!-- comment_right 结束  -->
        </div>
        <!-- comment_desc 结束  -->
    </li>
</script>
	<script type="text/template" id="course_mod_qa_temp">
    <div class="mod_qa">
        <span>功能尚未开放，敬请期待！</span>
    </div>
    <!-- mod_qa 结束  -->
</script>
	<script type="text/template" id="course_mod_files_temp">
    <li>
        <div class="file_desc">
            <div class="desc_title">上传者：${student.name}</div>
            <a href="${path}">${name}</a>

            <div class="desc_bottom">
                <span>时间：${date}</span>
                <span>大小：${size}</span>
                <span>下载次数：${downloadCount}</span>
            </div>
        </div>
        <!-- file_desc 结束  -->
    </li>
</script>
</body>
</html>